/*
 * @Author: 薛严 348352046@qq.com
 * @Date: 2022-11-05 15:50:44
 * @LastEditors: 薛严 348352046@qq.com
 * @LastEditTime: 2022-11-18 18:34:42
 * @FilePath: /vite-react-template/src/router/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { lazy } from 'react'
// Navigate重定向组件
import { Navigate } from "react-router-dom"
import Home from "@/pages/index/Index"
import Login from "@/pages/login/Index"
const Page1 = lazy(() => import("@/pages/page-one/Index"))
const Page2 = lazy(() => import("@/pages/page-two/Index"))
const Page3 = lazy(() => import("@/pages/page-three/Index"))
const Page4 = lazy(() => import("@/pages/page-four/Index"))

// 报错A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. 
// 懒加载的模式的组件的写法，外面需要套一层 Loading 的提示加载组件


const withLoadingComponent = (comp: JSX.Element) => (
  <React.Suspense fallback={<div>Loading...</div>}>
    {comp}
  </React.Suspense>
)

const routes = [
  //  嵌套路由 开始-------------------
  {
    path: "/",
    element: <Navigate to="/page1" />
  },
  {
    path: "/",
    element: <Home />,
    children: [
      {
        path: "/page1",
        element: withLoadingComponent(<Page1 />)
      },
      {
        path: "/page2",
        element: withLoadingComponent(<Page2 />)
      },
      {
        path: "/page3/page301",
        element: withLoadingComponent(<Page3 />)
      },
      {
        path: "/page4/page401",
        element: withLoadingComponent(<Page4 />)
      }
    ]
  },
  // 嵌套路由 结束-------------------
  {
    path: "/login",
    element: <Login />
  },
  // 访问其余路径的时候直接跳到首页
  {
    path: "*",
    element: <Navigate to="/page1" />
  }

  // {
  //   path:"/home",
  //   element: <Home />
  // },
  // {
  //   path:"/about",
  //   element: withLoadingComponent(<About />)

  // },
  // {
  //   path:"/user",
  //   element: withLoadingComponent(<User />)
  // }
]

export default routes